import { useEffect, useRef } from 'react';
import './common.css';
import { bus } from './store';
import * as echarts from 'echarts';
import Border from './dataV/border';

export default function table_lt() {
 const chartDom = useRef<HTMLDivElement>(null);
 useEffect(() => {
  const app = chartDom.current as HTMLElement
  const chart = echarts.init(app)
  var data = new Array(7).fill(0).map(() => {
   return Math.floor(Math.random() * 300 + 300)
  })
  const render = (city: string) => {
   const options = {
    title: {
     text: city + '近七日发出客流量',
     textStyle: {
      color: '#ffffff'
     }
    },
    tooltip: {
     trigger: 'axis',
     axisPointer: {
      type: 'cross',
      label: {
       backgroundColor: '#6a7985'
      }
     }
    },
    xAxis: {
     type: 'category',
     boundaryGap: false,
     data: ['七天前', '六天前', '五天前', '四天前', '三天前', '两天前', '昨日']
    },
    yAxis: {
     type: 'value',
    },
    series: {
     type: 'line',
     smooth: true,
     lineStyle: {
      width: 0
     },
     showSymbol: false,
     areaStyle: {
      opacity: 0.8,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
       {
        offset: 0,
        color: '#168BF2'
       },
       {
        offset: 1,
        color: '#60BCEB'
       }
      ])
     },
     data
    },
    color: ['#168BF2A7', '#01FFFFA7', '#21C6FEA7', '#1672FBA7', '#0B4C86A7', '#0056FBA7', '#60BCEBA7']
   }
   chart.setOption(options)
  }
  bus.on('area', (msg) => {
   data = new Array(7).fill(0).map(() => {
    return Math.floor(Math.random() * 300 + 300)
   })
   render(msg)
  })
 })
 return (
  <Border className='chart' style={{ left: 0, top: '12vh', padding: '30px' }}>
   <div ref={chartDom} style={{ width: '100%', height: '100%', color: '#ffffff' }}>尝试选择一个省份查看信息</div>
  </Border>
 )
}

